<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!-- 搜索框 -->
    <div style="margin: 20px;">
        <el-input
                v-model="searchKeyword"
                placeholder="输入姓名搜索"
                clearable
                @clear="fetchUsers"
                @input="handleSearch">
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
    </div>

    <!-- 添加用户表单 -->
    <el-form :model="userForm" label-width="80px" style="width: 400px; margin: 20px;">
        <el-form-item label="姓名">
            <el-input v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
            <el-input v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="addUser" type="primary">添加用户</el-button>
        </el-form-item>
    </el-form>

    <!-- 用户表格 -->
    <el-table :data="userList" border style="width: 95%; margin: 20px;">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row)" size="mini">编辑</el-button>
                <el-button @click="deleteUser(scope.row.id)" size="mini" type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑用户" :visible.sync="editDialogVisible">
        <el-form :model="editForm">
            <el-form-item label="姓名">
                <el-input v-model="editForm.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="editForm.email"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button @click="submitEdit" type="primary">确认</el-button>
      </span>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                searchKeyword: '',
                userForm: { name: '', email: '' },
                userList: [],
                editDialogVisible: false,
                editForm: { id: null, name: '', email: '' }
            }
        },
        mounted() {
            this.fetchUsers();
        },
        methods: {
            fetchUsers() {
                axios.get('/api/users')
                    .then(res => this.userList = res.data)
                    .catch(err => console.error(err));
            },
            addUser() {
                axios.post('/api/users', this.userForm)
                    .then(() => {
                        this.$message.success('添加成功');
                        this.userForm = { name: '', email: '' };
                        this.fetchUsers();
                    })
                    .catch(err => this.$message.error('添加失败: ' + err));
            },
            deleteUser(id) {
                this.$confirm('确认删除?', '提示', { type: 'warning' })
                    .then(() => {
                        axios.delete(`/api/users/${id}`)
                            .then(() => {
                                this.$message.success('删除成功');
                                this.fetchUsers();
                            });
                    })
                    .catch(() => {});
            },
            handleEdit(user) {
                this.editForm = { ...user };
                this.editDialogVisible = true;
            },
            submitEdit() {
                axios.put(`/api/users/${this.editForm.id}`, {
                    name: this.editForm.name,
                    email: this.editForm.email
                }).then(() => {
                    this.$message.success('更新成功');
                    this.editDialogVisible = false;
                    this.fetchUsers();
                }).catch(err => this.$message.error('更新失败: ' + err));
            },
            handleSearch() {
                if (!this.searchKeyword.trim()) {
                    this.fetchUsers();
                    return;
                }
                axios.get(`/api/users/search?name=${this.searchKeyword}`)
                    .then(res => this.userList = res.data)
                    .catch(err => this.$message.error('搜索失败: ' + err));
            }
        }
    });
</script>
</body>
</html>